<template>
  <div class="full-div">
    <h4>加载天地图图层</h4>
    <l-map
      :zoom="zoom"
      :center="center"
      class="lmap"
      @update:center="centerUpdate"
      @update:zoom="zoomUpdate">
      <l-control-layers
        :collapsed="false"
        ref="layerControl"></l-control-layers>
        <l-layer-group :visible="true" name="地图" layer-type="base">
          <l-tile-layer
            @add="hanldeLayerAdd"
            v-for="tileProvider in normalProviders"
            :key="tileProvider.name"
            :name="tileProvider.name"
            :visible="tileProvider.visible"
            :url="tileProvider.url"
            :subdomains="['0', '1', '2', '3', '4', '5', '6', '7']"
            />
        </l-layer-group>
        <l-layer-group :visible="true" name="影像" layer-type="base">
          <l-tile-layer
            v-for="tileProvider in satelliteProviders"
            :key="tileProvider.name"
            :name="tileProvider.name"
            :visible="tileProvider.visible"
            :url="tileProvider.url"
            :subdomains="['0', '1', '2', '3', '4', '5', '6', '7']"
            />
        </l-layer-group>
      <!-- <l-tile-layer
        :url="satelliteUrl"></l-tile-layer> -->
    </l-map>
  </div>
</template>

<script>
import L from 'leaflet'
import { LMap, LTileLayer, LControlLayers, LLayerGroup } from 'vue2-leaflet'

export default {
  name: 'TileTianditu',
  components: {
    LMap,
    LTileLayer,
    LControlLayers,
    LLayerGroup
  },
  data() {
    return {
      zoom: 4,
      center: L.latLng(47.413220, 18.219482),
      // url: 'http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}'
      normalUrl: 'http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}',
      annotionUrl: 'http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}',
      satelliteUrl: 'http://t{s}.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}',
      // subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
      currentZoom: 13,
      currentCenter: L.latLng(47.413220, -1.219482),
      normalProviders: [
        {
          name: 'Map',
          visible: true,
          url: 'http://t0.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}'
        },
        {
          name: 'Annotion',
          visible: true,
          url: 'http://t0.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}'
        }
      ],
      satelliteProviders: [
        {
          name: 'Map',
          visible: true,
          url: 'http://t0.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}'
        },
        {
          name: 'Annotion',
          visible: true,
          url: 'http://t0.tianditu.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}'
        }
      ],
    }
  },
  methods: {
    zoomUpdate (zoom) {
      this.currentZoom = zoom;
    },
    centerUpdate (center) {
      this.currentCenter = center;
    },
    hanldeLayerAdd(e) {
      console.log(e)
    }
  }
}
</script>

<style scoped>
.full-div {
  width: 900px;
  height: 500px;
  margin: auto;
}

.lmap {
  width: 100%;
  height: 100%;
}
</style>

